<template>
	<div class="login_wrap">
		<el-row :gutter="20">
		  <el-col :span="10" :offset="6">
		  	<p class="bx_admin_title">
          Admin-watermelonMan    
        </p>
        <div class="grid-content bg-purple login_content_wrap">
          <div class="login_content_wrap">
            <p class="sm_title">登陆</p>
            <el-input
              placeholder="请输入用户名"
              v-model="input">
            </el-input>
            <el-input
              placeholder="请输入密码"
              v-model="input">
            </el-input>
            <div class="login_button">
              <el-checkbox v-model="checked" class='left'>记住我</el-checkbox>
              <el-button type="primary" class='right'>登陆</el-button>
            </div>
          </div>
		  	</div>
		  </el-col>
		</el-row>
	</div>
</template>
<script>
	export default {
		name: 'login',
		data() {
			return {
        input:'',
        checked:''
			}
		}
	}
</script>
<style scoped>
  *{
    font-family: '微软雅黑';
  }
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #efefef;
    height: 240px;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
    line-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  .bx_admin_title{
    margin: 10px 0;
    font-size: 22px;
  }
  .sm_title{
    font-size: 18px;
  }
  .el-input{
    margin: 0 auto 10px;
  }
  .login_content_wrap{
    width: 90%;
    margin: 0 auto;
  }
  .left{
    float: left;
  }
  .right{
    float: right;
  }
  .login_wrap{
    margin-top: 100px;
    max-width: 960px;
    margin-left: auto;
    margin-right: auto; 
  }
</style>
